/*
	pax.css - global PAX library CSS file
	
	Organisation
	------------
	
	The most generic items appear first. This means that HTML element are set 
	first, then resusable classes, then specific classes for components of the
	PAX system, such as widgets, etc.

	NOTE TODO:
	
	Due to a problem with IE6, we MUST (*should*) add unique CSS classes, if we have more than two classes to cascade:
		
		http://www.ryanbrill.com/archives/multiple-classes-in-ie
	
	This will work in other browsers as well, so we will bregrudingly use it, even though it forces us to use a 
	convention in naming our CSS classes.
	
	The convention we implement is simply to add the baseClass + '_' + action type. eg: cls.pButtonHover becomes cls_pButtonHover
	
*/


/*	This is a modified version of the reset from Blueprint.
 	Differences: 
 
	. We set the font-family
	. We don't set the font-size
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; vertical-align:baseline; 
}
body				{ line-height:1.5; }
table				{ border-collapse:separate;border-spacing:0; }
caption, th, td		{ text-align:left;font-weight:normal; }
table, td, th		{ vertical-align:middle; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q		{ quotes:"" ""; }
a img				{ border:none; }

/*
	--- NaturalDocs PAX Example classes ---
	
	TODO: Move these out of here!
	
*/
.winBox {
	background-color: #fff;
	border: 2px solid #ccc;
}

#darkener {
	background-color: #000; 
	display:none;
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	filter:alpha(opacity=30);
	opacity: 0.3;
	-moz-opacity:0.3;
}

#exampleWindow {
	position:absolute;
	width: 80%;
	height: 80%;
	margin-top: 29px;
	display:none;
	font-family: courier new;
	font-size: 10pt;
	background-color: #fff;
	z-index: 1;
}

#exampleWindowTitleBar {
	position:absolute;
	width:80%;
	height: 29px;
	font-family: Verdana;
	font-weight: bold;
	color: #000;
	background-color: #e9e9e9;
	padding: 4px;
	border-bottom: 1px solid #ccc;

}

#exampleWindowTitle {
	font-family: courier new;
	font-size: 10pt;
}

#exampleWindowCloseButton {
	float:right;
	display:inline;
	border: 1px solid #ccc; 
	color: white;
	padding-left:20px;
	padding-right:20px;
	background-color: #f95555;
}

#exampleDiv {
	width:100%;
	height:100%;
	font-family: courier new;
	font-size: 10pt;
	background-color: #ffffff;
	overflow: auto;
	padding: 4px;
	z-index: 2;
}

#exampleWindowStatusBar {
	height:20px;
	width:100%;
	font-family: Verdana;
	font-weight: bold;
	color: #000;
	background-color: #e9e9e9;
	padding: 4px;
	border-top: 1px solid #ccc;
}

/*	PAX Spinner classes	*/
.narrowDark {
	width: 16px;
	height: 16px;
	background-image: url( ../img/load_narrow_dark.gif );
	background-repeat:  no-repeat;
	background-position: top left;
}


/*
	---------- Validation classes ----------
*/

/* The surrounding container for each form field */
.formField			{ width: 1300px; clear: left; }
.errorMessage		{ position: absolute; font-family: Verdana; font-size: 8pt; width: 120px; border: 2px solid #F00; padding:4px; background-color: #FAA; filter:alpha(opacity=70); opacity: 0.7; -moz-opacity:0.7; text-align: left; }
.successMessage		{ position: absolute; font-family: Verdana; font-size: 8pt; width: 120px; border: 2px solid #0F0; padding:4px; background-color: #AFA; filter:alpha(opacity=70); opacity: 0.7; -moz-opacity:0.7; text-align: left; }
.hintMessage		{ position: absolute; z-index: 5; font-family: Verdana; font-size: 8pt;	width: 120px;	border: 2px solid #FF0;	padding:4px; background-color: #FFA;	filter:alpha(opacity=85);	opacity: 0.85;	-moz-opacity:0.85;	text-align: left; }
.hintGrowMessage	{ z-index: 5; font-family: Verdana; font-size: 8pt; border: 2px solid #FF0; padding: 4px; background-color: #FFA;	filter:alpha(opacity=85);	opacity: 0.85;	-moz-opacity: 0.85;	text-align: left; }
.ajaxSpinner		{ position: absolute; top: 5px; right: 5px; font-family: Verdana; font-size: 4pt; }
.tobeValidatedField	{ border:1px solid #00f;	background-color: #ffffff;}
.invalidField		{ border:1px solid #f00;	background-color: #ffffff;}
.validField			{ border:1px solid #B5B8C8;	background-color: #ffffff;}



/*	WIP: Rename all classes to have a 'pax' prefix. */





/*	Modal box	*/
#paxModalBox		{ position: fixed; z-index: 101; top: 50%; left: 50% }

/* Overlay */
.paxModalOverlay	{ width: 100%; height: 100%; left: 0; top: 0; position: fixed; z-index: 100; }
#paxModalOverlayBox	{ background-color: #000; filter: alpha( opacity=65 ); -moz-opacity: 0.65; opacity: 0.65; }

/* IE6 hacks TODO: Move to ie6 conditionally included CSS file */
* html #paxModalBox	{ position: absolute; }
* html .paxModalOverlay	{
	position: absolute;
	height: expression( document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px' );
	width:  expression( document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px' );
}
/* end IE6 hacks */

/* deafult display classes for the modal box */
#paxModalBox						{ text-align: left; background: #fff; color: #000 }
#templatePaxModalBox				{ padding: 8px }
#OLDtemplatePaxModalBoxContent			{ display: inline }
#templatePaxModalBoxContent			{ display: block }
#templatePaxModalBoxFooter			{ height: 20px; line-height: 20px; font-size: 14px; display: block; padding-top: 4px }
#templatePaxModalBoxFooterContent	{ height: 20px; line-height: 20px; font-size: 14px; display: inline; vertical-align: middle; padding-bottom: 11px }
.paxModalCloseButton				{ background: #fff url(../img/modal_close.png) no-repeat top left; width: 20px; height: 20px; display: inline-block; margin-left: -2px }


/*  DatePicker CSS	*/
.datePickButton				{ cursor: text; }
.datePick 					{ padding: 0; margin: 0; background-color: #aaa; font-family: Tahoma; font-size: 10px; }
.datePick .headDays			{ padding: 2px; width: 20px; background-color: #d8d8d8; font-family: Verdana; text-align: center; }
.datePick .monthName		{ text-align: center; font-family: Tahoma; font-size: 11px; font-weight: normal; color: white; }
.datePick .buttons			{ font-family: Tahoma; font-size: 10px; font-weight: bold; padding: 2px; }
.datePick .buttons a		{ border: 1px solid #ccc; padding: 0px 2px 2px 0px; background-color: #eee; cursor: hand; cursor: pointer; }
.datePick .buttons.left		{ text-align: left; }
.datePick .buttons.right	{ text-align: right; }
.datePickIcon				{ cursor: hand; cursor: pointer; }
.datePickDay				{ border: 0; padding: 2px 0px 2px 0px; background-color: #fff; text-align: center; font-family: Tahoma; font-size: 12px; cursor: hand; cursor: pointer; border: 1px solid #fff; }
.datePickDay.today			{ border: 1px solid red; }
.datePickDay.selectedDay	{ font-weight: bold; background-color: #d8d8d8; }
.datePickDay.prevMonth		{ color: #aaa; }
.datePickDay.nextMonth		{ color: #aaa; }
.datePickDay td				{ width: 40px; }
.datePickDay.hover			{ background-color: #d8d8d8; }


/*	Menu dropdown	*/
/*	Note: IE issue where hover does not fire, probably because of the menuSub class, check quirksmode for details */
.paxMenuDropDown					{ background-color: #eee; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; border-left: 1px solid #ccc; border-top: 1px solid #ccc; list-style-type: none; margin: 0; padding: 0.5em; font-family: Verdana; font-size: 80%; }
.paxMenuDropDown a.menuSub			{ background: url(../img/arrow_right_black.gif) bottom right no-repeat; }
.paxMenuDropDown a.menuSub:hover	{ background: url(../img/arrow_right_white.gif) bottom right no-repeat; }
.paxMenuDropDown li					{ font-weight: bold; color: #777; padding: 0.5em 1em 1em 0.5em; margin: 0; cursor: default; white-space: nowrap; list-style-type: none; }
.paxMenuDropDown li:hover			{ zoom: 1; }
.paxMenuDropDown.horizontal li		{ display: inline; }
.paxMenuDropDown.vertical			{ width: 15em; border-right: 1px solid #600; }
.paxMenuDropDown.vertical li		{ width: 13em; list-style-type: none; }
.paxMenuDropDown li.active			{ background-color: #00f; color: white; }
.paxMenuDropDown li.active a		{ color: black; }
.paxMenuDropDown li.active a:hover	{ text-decoration:none; background-color: #00f; color: white; border: none; }
.paxMenuDropDown li a				{ text-decoration:none; color: #777; }
.paxMenuDropDown ul					{ position: absolute; visibility: hidden; text-align: left; width: 15em; margin: 0; padding: 0; z-index: 10; background-color: #eee; border: 1px solid #aaa; border-left: 1px solid #ccc; border-top: 1px solid #ccc; }
.paxMenuDropDown ul li,
.paxMenuDropDown.vertical ul li,
.paxMenuDropDown.horizontal ul li	{ font-weight: normal; display: block; padding: 0; white-space: normal; width: 15em; list-style-type: none; }
.paxMenuDropDown ul li a			{ display: block; width: 13em; color: #cdf; color: #f00; text-decoration: none; margin: 0; padding: 0.5em 1em 0.5em 1em; }
.paxMenuDropDown ul li a:hover		{ color: white; background-color: #00f; }
.paxMenuDropDown ul li.active		{ background-color: #00f; color: white; }


/*	Menu tree	*/
/*	Note: we use the zoom: 1 workaround for haslayout IE bug	*/
.paxMenuTree							{ font-family: Verdana; font-size: 0.9em; line-height: 100%; margin: 0; padding: 0; }
.paxMenuTree ul							{ margin: 0; padding: 0; }
.paxMenuTree li							{ background: url(../img/tree_list.gif) no-repeat left center; list-style-type: none; padding-left: 22px; padding-bottom: 3px; zoom: 1; }
.paxMenuTree li:hover					{ zoom: 1; }
.paxMenuTree li.last					{ background: url(../img/tree_listend.gif) no-repeat left center; list-style-type: none; padding-left: 22px; margin-bottom: 0px; }
.paxMenuTree li.submenu					{ background: url(../img/tree_closed.gif) no-repeat left -2px; cursor: hand !important; cursor: pointer !important; }
.paxMenuTree li.submenu ul				{ display: none; }
.paxMenuTree .submenu ul li				{ cursor: default; }
.paxMenuTree .subMenuOpen				{ display: block; }
.paxMenuTree .subMenuClosed				{ display: none; }
.paxMenuTree li.last.submenu.menuOpen	{ background: url(../img/tree_open_last.gif) no-repeat left -2px; }
.paxMenuTree li.submenu.menuOpen		{ background: url(../img/tree_open.gif) no-repeat left -2px; }
.paxMenuTree li.submenu.menuClosed		{ background: url(../img/tree_closed.gif) no-repeat left -2px; }
.paxMenuTree li.highlight				{ background-color: yellow; }
.paxMenuTree a:hover					{ background: blue; color: white; zoom: 1 }



/*	Option transfer	*/
.paxOptiontransferButton			{ display: block; width: 40px; margin-top: 8px; font-size: 14px; }
.paxOptiontransferButtonSurround	{ float: left; padding: 16px; }
.paxOptiontransferField				{ float: left; }

/*	Button	*/
.pButton				{ font: normal 11px tahoma, verdana, helvetica; cursor: pointer; white-space: nowrap; }
.pButton button			{ border:0 none; background: transparent; font: normal 11px tahoma,verdana,helvetica; padding: 0; margin: 0; width: auto; -moz-outline: 0 none; outline: 0 none; cursor: pointer; white-space: nowrap; }
.pButton button.paxisIe	{ padding-top: 2px; }

/*
 Predefined css class for buttons with only icon. Add this class (pButton-icon) and a class with a background-image
 to your button for a button with just an icon.
 e.g.
 .my-class .pButton-text { background-image: url(foo.gif); }
 */
 
.pButton-text.arrowLeft			{ background-image: url( ../img/arrow_left.gif );	background-repeat:  no-repeat;	background-position: top left; }
.pButton-text.arrowLeftFull		{ background-image: url( ../img/arrow_left_full.gif );	background-repeat:  no-repeat;	background-position: top left; }
.pButton-text.arrowRight		{ background-image: url( ../img/arrow_right.gif );	background-repeat:  no-repeat;	background-position: top left; }
.pButton-text.arrowRightFull	{ background-image: url( ../img/arrow_right_full.gif );	background-repeat:  no-repeat;	background-position: top left; }
.pButton em						{ padding: 0; margin: 0;	font-style:normal;	font-weight:normal;	width: 0px; }
.pButton-left, .pButton-right	{ font-size:1px;	line-height:1px; }
.pButton-left					{ width:3px;	height:22px;	background:url("../img/button_surround_22px.gif") no-repeat 0 0; }
.pButton-right					{ width:3px;	height:22px;	background:url(		'../img/button_surround_22px.gif' ) no-repeat 0 -22px; }
.pButton-left span, .pButton-right span { display:block;	width:3px;	overflow:hidden;	font-size:1px;	line-height:1px; }
.pButton-center					{ background:url(../img/button_surround_22px.gif) repeat-x 0 -44px;	vertical-align: middle;	text-align:center;	cursor:pointer;	white-space:nowrap; }
.pButtonHover .pButton-left		{ background-position: 0 -66px; }
.pButtonHover .pButton-right	{ background-position: 0 -88px; }
.pButtonHover .pButton-center	{ background-position: 0 -110px; }
.pButtonClick .pButton-center	{ background-position: 0 -132px; }
.pButton-disabled * 			{ color: gray !important; cursor: default !important; }

.pButton-menu-text-wrap .pButton-center { padding:0 3px;}
/*	No-chrome button reset	*/
.pButtonNoChrome { background: none; }
.pButtonNoChrome .pButton-right, .pButtonNoChrome .pButton-left, .pButtonNoChrome .pButton-center { background: none;}
/*	Buttons for the window	*/
.pButtonNoChrome.pButtonWindow.min							{ background-image: url( ../img/window_button_min.gif );}
.pButtonNoChrome.pButtonWindow.min_pButtonHover				{ background-image: url( ../img/window_button_min_on.gif );}
.pButtonNoChrome.pButtonWindow.max							{ background-image: url( ../img/window_button_max.gif );}
.pButtonNoChrome.pButtonWindow.max_pButtonHover				{ background-image: url( ../img/window_button_max_on.gif );}
.pButtonNoChrome.pButtonWindow.cls							{ background-image: url( ../img/window_button_cls.gif );}
.pButtonNoChrome.pButtonWindow.cls_pButtonHover 			{ background-image: url( ../img/window_button_cls_on.gif );}
.pButtonNoChrome.pButtonWindow.arrowReverse 				{ background-image: url( ../img/arrow_reverse.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowReverse_pButtonHover	{ background-image: url( ../img/arrow_reverse_on.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowDown					{ background-image: url( ../img/arrow_down.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowDown_pButtonHover		{ background-image: url( ../img/arrow_down_on.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowLeft					{ background-image: url( ../img/arrow_left.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowLeft_pButtonHover		{ background-image: url( ../img/arrow_left_on.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowRight					{ background-image: url( ../img/arrow_right.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowRight_pButtonHover		{ background-image: url( ../img/arrow_right_on.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowForward					{ background-image: url( ../img/arrow_forward.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.pButtonWindow.arrowForward_pButtonHover	{ background-image: url( ../img/arrow_forward_on.gif );	background-repeat:  no-repeat;	background-position: top left;}
/*	Buttons for widgets */
.pButtonNoChrome.widget.datePick							{ width: 16px;	height: 14px;	background-image: url( ../img/datepick_icon.gif );	background-repeat:  no-repeat;	background-position: top left;}
.pButtonNoChrome.widget.datePick_pButtonHover				{ width: 16px;	height: 14px;	background-image: url( ../img/datepick_icon_on.gif );	background-repeat:  no-repeat;	background-position: top left;}


/* --- Generic widget --- */
/* Row based classes */
.r0			{ background-color: #fff; }
.r1			{ background-color: #eee; }
.r0Hover	{ background-color: #ddf; }
.r1Hover	{ background-color: #ddf; }

/* Items */
.itemHover 			{ background-color: #ccf; }
.itemHoverInverse	{ color: white; background-color: #55f; }


/*	AutoComplete	*/
.pAutoCompMatchDefault			{ background-image: url( ../img/match_start.gif );	background-repeat:  no-repeat;	background-position: top left;	cursor: hand;	cursor: pointer;}
.pAutoCompMatchPartial			{ background-image: url( ../img/match_partial.gif );	background-repeat:  no-repeat;	background-position: top left;	cursor: hand;	cursor: pointer;}
.pAutoCompMatchSoundex			{ background-image: url( ../img/match_soundex.gif );	background-repeat:  no-repeat;	background-position: top left;	cursor: hand;	cursor: pointer;}
.pAutoCompResult				{ display: none;	position: absolute;	font-family: Verdana;	font-size: 10px;	position:absolute;	border: 1px solid #ccc;	background: #fff;	padding: 4px;	text-align: left;}
.pAutoCompResultLine			{ font-family: Verdana;	font-size: 10px;	cursor: hand;	cursor: pointer;}
.pAutoCompResultLineSelected	{ font-family: Verdana;	font-size: 10px;	background-color: #0202ee;	color: #ffffff;	cursor: hand;	cursor: pointer;}
.pAutoCompConfigBox				{ font-family: Verdana;	font-size: 10px;	cursor: hand;	cursor: pointer;	position: absolute;	border: 1px solid #ccc;	background: #fff;	padding: 4px;}
.pAutoCompConfigIcon			{ position: absolute;}


/* new pTabset CSS */
.pTabset				{ border: 1px solid gray;}
.pTabsetHover			{ background-image: url( ../img/tabset_header_hover.gif );}
.pTabsetHeaderShown		{ background-image: url( ../img/tabset_header_shown.gif );	height: 26px;	/*	The height may be destroying the header display	*/}
.pTabsetCell			{ font-family: Tahoma;	font-size: 9pt;	border-right: 1px solid #ccc;	/* --- Layout CSS --- */	overflow:hidden; 	-o-text-overflow: ellipsis; 	text-overflow: ellipsis; 	padding:6px 13px 3px 12px; 	white-space: nowrap; 	-moz-user-select: none; }
.pTabsetScroll			{ overflow: auto;	position: relative;	background-color: white;}
.pTabsetNoScroll		{ overflow: hidden;}
.pTabsetContent 		{ padding: 4px;	border-bottom: 1px solid gray;}
.pTabsetContentIFrame	{ padding: 0;	border-bottom: 1px solid gray;}
.pTabsetHeader			{ background-image: url( ../img/tabset_header.gif );	height: 26px;	cursor: hand;	cursor: pointer;}

/* new pGird CSS */
.pGrid								{ border: 1px solid gray;}
.headerRowHover						{ background-image: url( ../img/header_hover.gif );}
.pGridBody.container				{ width: auto;}
.pGridCell							{ font-family: Tahoma;	font-size: 9pt;	border-right: 1px solid #ccc;	/* --- Layout CSS --- */	overflow:hidden; 	-o-text-overflow: ellipsis; 	text-overflow: ellipsis; 	padding:3px 3px 3px 5px; 	white-space: nowrap; 	-moz-user-select: none; }
.pGrid .pGridTD						{ font-family: Tahoma;	font-size: 9pt;}
.pGridCell.header.sortHeaderOnAsc	{ background-image: url( ../img/sort_asc.gif );	background-repeat:  no-repeat;	background-position: top right;}
.pGridCell.header.sortHeaderOn		{ background-image: url( ../img/sort_desc.gif );	background-repeat:  no-repeat;	background-position: top right;}
.pGridCell.content					{ border-bottom: 1px solid #ccc;	overflow: hidden;}
.pGridCell.footer					{ border: 0;}
.pGridScroll						{ overflow:auto;}
.pGridHeader						{ background-image: url( ../img/header.gif );	height: 22px;	cursor: hand;	cursor: pointer;}
.pGridFooter						{ 	background-image: url( ../img/footer_medium.gif );	height: 32px;}
.pGridFilter						{ background-color: #e5e5e5;	height: 26px;	border-bottom: 1px solid gray;}

/* new pWindow CSS */
.pWindow				{ border: 1px solid gray;	background: #ddd;	margin-left: 5px;	margin-right: 5px;}
.pWindowCell			{ font-family: Tahoma;	font-size: 12px;	font-weight: bold;	color: #666666;		/* --- Layout CSS --- */	overflow:hidden; 	-o-text-overflow: ellipsis; 	text-overflow: ellipsis; 	white-space: nowrap; 	-moz-user-select: none; }
.pWindow .pWindowTD		{ font-family: Tahoma;	font-size: 9pt;}
.pWindowTD				{ height: 28px; }
.pWindowTD.header_left, .pWindowTD.header_right		{ background-image: url( ../img/window_header_side.gif );}
.pWindowCell.header_left, .pWindowCell.header_right	{ height: 28px;	width: 5px;}
.pWindowTD.footer_left, .pWindowTD.footer_right		{ background-image: url( ../img/window_footer_side.gif );	background-repeat:  repeat-x;}
.pWindowCell.footer_left, .pWindowCell.footer_right	{ height: 29px;	width: 5px;}
.pWindowBody			{ background: #d6d6d6;}
.pWindowCell.content	{ border-bottom: 1px solid #ccc;}
.pWindowCell.footer		{ border: 0;}
.pWindowScroll			{ overflow:auto;	position:relative;	border: 1px solid #959595;	margin-left: 5px;	margin-right: 5px;	background: white;}
.pWindowHeader			{ background-image: url( ../img/window_header.gif );	height: 28px;	cursor: hand;	cursor: pointer;}
.pWindowFooter			{ 	background-image: url( ../img/window_footer.gif );	height: 29px;}
